<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/my.css">
		<link href="css/bootstrap-theme.min.css" rel="stylesheet">
		<!-- <link rel="stylesheet" href="css/github.css"> -->
		<link rel="stylesheet" href="css/github.css">
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/highlight.min.js"></script>
		<script src="js/marked.js"></script>
	</head>
	<body>
		<div id="header" class="text-center">MarkDown解析器</div>
		<div class="container">
			<div class="row">
				<div id="inputtext" class="col-sm-6 col-lg-6 col-md-6   " >
					<textarea id="md" class="form-control"  wrap="hard" placeholder="请输入Markdown代码"></textarea>
				</div>
				<div id="html" class="col-lg-6 col-sm-6 col-md-6 divcss5-b">

				</div>
			</div>
		</div>
	</body>
	<script>
		var rendererMD = new marked.Renderer();
		marked.setOptions({
		    renderer: rendererMD,
			gfm: true,
			tables: true,
			breaks: false,
			pedantic: false,
			sanitize: false,
			smartLists: true,
			smartypants: false,
			highlight: function (code) {
    return hljs.highlightAuto(code).value;
  }
		});
		$("#md").on("keyup blur", function() {
			$('#html').html(marked($("#md").val()))
		})
	$("#md").scroll(function(){
        $("#html").scrollTop($(this).scrollTop()); 
    });
//     $("#html").scroll(function(){
// 		// var htmlHeight = $("#html")[0].scrollHeight;//总高度
// 		// var mdHeight = $("#md")[0].scrollHeight;//总高度
// 		
// 		// var htmlHeightNew = $('#html').scrollTop() + $("#html")[0].clientHeight;//当前位置
// 		// var percent = htmlHeightNew / htmlHeight;//百分比
// 		// console.info("scrollTop" + htmlHeightNew);
// 		// console.info("mdHeight:"+mdHeight);
// 		// console.info("htmlHeight" + htmlHeight);
// 		// mdHeight * percent;
//         $("#md").scrollTop($(this).scrollTop());
// 		// $("#md").scrollTop(mdHeight * percent)
//     });
	</script>

</html>
